<table class="layui-hide" id="test"></table>
<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/index/select'
            , page: true
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {type: 'numbers'}
                , {field: 'title', title: '标题'}
                , {field: 'author', title: '提交人'}
                , {field: 'createTime', title: '时间'}
                , {field: 'right', title: '操作', align: 'center', toolbar: '#barDemo'}
            ]]
        });

        //监听工具条
        table.on('tool', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.open({
                    title:data.title
                    ,type:1
                    ,area:'500px'
                    ,content:'<fieldset class="layui-elem-field layui-field-title">\n' +
                    '  <legend>作者 - '+data.author+'</legend>\n' +
                    '  <div class="layui-field-box">\n' +
                    ' '+data.content+'\n' +
                    '  </div>\n' +
                    '</fieldset>'
                });
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });
    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
